import React, { PureComponent } from 'react'
import { StyleSheet, View, Text, Image, ScrollView, RefreshControl, TouchableOpacity } from 'react-native'
import * as api from '../../../api'
import Banner from '../Banner'
import CategoryGridView from './CategoryGridView'


type Props = {
    navigation: any,
    categoryId:string,//当前页对应的id
}

type State = {
    value: string,//手机页的一级分类id
    isRefreshing: boolean,
    // advertisingList: Array<Object>,
    secondCategoryList: Array<Object>,
    productList: Array<Object>,
    // isASuccess: boolean,//是否轮播图请求成功
    isCSuccess: boolean,//是否请求二级分类成功
    isPSuccess: boolean,//是否推荐请求成功
    lineNumber: number,//一行展示几个分类
    showAll: boolean,//二级分类是否展示全部
}

class TabScene_phone extends PureComponent<{}>{

    constructor(props: Object) {
        super(props)

        this.state = {
            value: "3360adbe2fca473ca5d8964a955e404a",
            isRefreshing: false,
            // advertisingList: [],
            secondCategoryList: [],
            productList: [],
            // isASuccess: true,
            isCSuccess: true,
            isPSuccess: true,
            lineNumber: 0,
            showAll: true,
        }
    }

    componentDidMount() {
        this.requestData()

    }
    pullRefresh() {
        setTimeout(() => {
            this.requestData()
            this.setState({ isRefreshing: false })
        }, 2000)
    }
    requestData = async () => {
        this.setState({ Refreshing: true })
        // this.requestAdvertisingList()
        this.requestSecondCategoryList()
        this.requestProductList()
    }

    // requestAdvertisingList = async () => {
    //     try {
    //         var parameter = {}
    //         var list = await api.getAdvertisingList(parameter)
    //         this.setState({
    //             advertisingList: list,
    //             isASuccess: true,
    //         })
    //     } catch (error) {
    //         //alert('请求失败，请重试' + error)
    //         this.setState({
    //             isASuccess: false,
    //         })
    //     }
    // }
    //获取二级类目列表
    requestSecondCategoryList = async () => {
        try {
            var parameter = { "cateId": this.props.categoryId }
            var list = await api.getSecondCategoryList(parameter)
            if (list.length > 0) {
                this.getLineNumber(list)
            } else {
                this.setState({
                    isCSuccess: false,
                })
            }
        } catch (error) {
            //alert('请求失败，请重试' + error)
            this.setState({
                isCSuccess: false,
            })
        }

    }
    requestProductList = async () => {
        try {
            var parameter = {}
            var list = await api.getRecommendProductList(parameter)
            this.setState({
                productList: list,
                isPSuccess: true,
            })

        } catch (error) {
            //alert('请求失败，请重试' + error)
            this.setState({
                isPSuccess: false,
            })
        }
    }
    //计算显示多少分类以及每行显示几个分类
    getLineNumber(secondCategoryList: Array) {
        let categoryLength = secondCategoryList.length;//获取分类数目
       // alert(categoryLength)
        //分类显示逻辑：https://pro.modao.cc/app/cQuncX8pwvw6gjZzBpcfClw035sc5LA#screen=sA2172261611523954801845
        if (categoryLength > 8) {
            //只展示前9个，分两行展示，每行5个，展示 全部
            categoryLength = 9
            this.setState({
                lineNumber: 5,
                showAll: true,
            })
        } else if (categoryLength > 6) {
            //只展示前7个，分两行展示，每行4个，展示 全部
            categoryLength = 7
            this.setState({
                lineNumber: 4,
                showAll: true,
            })
        } else if (categoryLength > 5) {
            //分两行展示，每行3个，不展示 全部
            categoryLength = 6
            this.setState({
                lineNumber: 3,
                showAll: false,
            })
        } else {
            // 一行展示，不展示全部
            this.setState({
                lineNumber: categoryLength,
                showAll: false,
            })
        }

        let categoryList = []
        for (let i = 0; i < categoryLength; ++i) {
            categoryList.push(secondCategoryList[i])
        }
        this.setState({
            secondCategoryList: categoryList,
            isCSuccess: true,
        })
    }


    render() {

        return (
            (this.state.isPSuccess && this.state.isCSuccess) ?
                <View style={styles.container}>
                    <ScrollView
                        refreshControl={
                            <RefreshControl
                                refreshing={this.state.isRefreshing}
                                onRefresh={() => this.requestData()}
                                tintColor='gray'
                            />
                        }>
                        {/*轮播图*/}
                        <Banner
                            advertisingList={this.state.advertisingList}
                        />
                        {/*二级分类*/}
                        {this.state.secondCategoryList.length > 0 &&
                            <CategoryGridView
                                infos={this.state.secondCategoryList}
                                showALl={this.state.showAll}
                                lineNumber={this.state.lineNumber}
                            />
                        }
                        {/*排序选择*/}

                        {/*商品列表*/}


                    </ScrollView>
                </View>
                : <TouchableOpacity style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
                    onPress={() => this.requestData()}>
                    <Text color={'#FFFF00'}>加载失败!</Text>
                    <Text color={'#FFFF00'}>重新加载</Text>
                </TouchableOpacity>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'white'
    },
})
export default TabScene_phone 